import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { detailData } from '@/mocks/detailData';
import { EnglishPracticeContent } from '@/types';
import { toast } from 'sonner';

/**
 * 图片详情页组件
 * 展示所选图片的详细信息和相关英语学习内容
 */
export default function ImageDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [content, setContent] = useState<EnglishPracticeContent | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('description');

  useEffect(() => {
    if (!id) {
      toast.error('无效的场景ID');
      navigate('/');
      return;
    }

    // 在实际应用中，这里会通过API或文件系统加载对应的JSON文件
    // 这里使用模拟数据
    const numericId = parseInt(id, 10);
    const sceneContent = detailData[numericId];

    if (!sceneContent) {
      toast.error('未找到对应的场景内容');
      navigate('/');
      return;
    }

    setContent(sceneContent);
    setIsLoading(false);
  }, [id, navigate]);

  if (isLoading) {
    return (
      <div className="flex h-screen w-full items-center justify-center bg-white">
        <div className="text-center">
          <i className="fa-solid fa-circle-notch fa-spin text-blue-500 text-3xl"></i>
          <p className="mt-4 text-gray-600">加载场景内容中...</p>
        </div>
      </div>
    );
  }

  if (!content) {
    return null; // 内容不存在时已在useEffect中重定向
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* 返回按钮 */}
      <div className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm p-4 shadow-sm">
        <button
          onClick={() => navigate('/')}
          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
        >
          <i className="fa-solid fa-arrow-left mr-2"></i>
          <span>返回场景列表</span>
        </button>
      </div>

      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-8">
        {/* 标题区域 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          <h1 className="text-3xl font-bold text-gray-900">{content.title}</h1>
          <div className="mt-4 h-[280px] w-full overflow-hidden rounded-xl shadow-md">
            <img
              src={`https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=${encodeURIComponent(content.title)}`}
              alt={content.title}
              className="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
            />
          </div>
        </motion.div>

        {/* 标签页导航 */}
        <div className="mt-8 border-b border-gray-200">
          <nav className="-mb-px flex space-x-8">
            <button
              onClick={() => setActiveTab('description')}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'description'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <i className="fa-solid fa-align-left mr-2"></i>背景描述
            </button>
            <button
              onClick={() => setActiveTab('vocabulary')}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'vocabulary'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <i className="fa-solid fa-book mr-2"></i>重点词汇
            </button>
            <button
              onClick={() => setActiveTab('dialogue')}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'dialogue'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <i className="fa-solid fa-comments mr-2"></i>对话示例
            </button>
            <button
              onClick={() => setActiveTab('practice')}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === 'practice'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <i className="fa-solid fa-graduation-cap mr-2"></i>练习提示
            </button>
          </nav>
        </div>

        {/* 标签页内容 */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="mt-6"
        >
          {activeTab === 'description' && (
            <div className="space-y-4">
              <div className="rounded-xl bg-white p-6 shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 mb-3">
                  <i className="fa-solid fa-circle-info text-blue-500 mr-2"></i>场景背景
                </h3>
                <p className="text-gray-700 leading-relaxed">{content.backgroundDescription}</p>
              </div>
              
              <div className="rounded-xl bg-blue-50 p-6 shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 mb-3">
                  <i className="fa-solid fa-user-robot text-blue-500 mr-2"></i>机器人角色
                </h3>
                <p className="text-gray-700 leading-relaxed">{content.robotRole}</p>
              </div>
            </div>
          )}

          {activeTab === 'vocabulary' && (
            <div className="rounded-xl bg-white p-6 shadow-sm">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                <i className="fa-solid fa-language text-blue-500 mr-2"></i>重点词汇
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                {content.keyVocabulary.map((vocab, index) => (
                  <div
                    key={index}
                    className="flex items-center rounded-lg bg-gray-50 px-4 py-2 transition-colors hover:bg-blue-50"
                  >
                    <span className="text-blue-600 font-medium mr-2">{vocab}</span>
                    <button className="ml-auto text-gray-400 hover:text-blue-500">
                      <i className="fa-solid fa-volume-up"></i>
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'dialogue' && (
            <div className="rounded-xl bg-white p-6 shadow-sm">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                <i className="fa-solid fa-comments text-blue-500 mr-2"></i>情景对话
              </h3>
              <div className="space-y-4">
                <div className="whitespace-pre-line rounded-lg bg-gray-50 p-4 text-gray-700">
                  {content.scenarioDialogue}
                </div>
                
                <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="rounded-lg bg-blue-50 p-4 text-center">
                    <h4 className="text-sm font-medium text-gray-700 mb-2">你的角色</h4>
                    <button className="inline-flex items-center rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                      <i className="fa-solid fa-microphone mr-2"></i>开始对话练习
                    </button>
                  </div>
                  <div className="rounded-lg bg-gray-50 p-4 text-center">
                    <h4 className="text-sm font-medium text-gray-700 mb-2">对话提示</h4>
                    <p className="text-sm text-gray-600">
                      点击"开始对话练习"按钮，系统会扮演场景中的其他角色与你进行互动对话
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'practice' && (
            <div className="space-y-6">
              <div className="rounded-xl bg-white p-6 shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">
                  <i className="fa-solid fa-lightbulb text-amber-500 mr-2"></i>练习提示
                </h3>
                <ul className="space-y-2 text-gray-700">
                  {content.practiceTips.map((tip, index) => (
                    <li key={index} className="flex">
                      <span className="flex h-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 text-xs font-medium mr-3">
                        {index + 1}
                      </span>
                      <span>{tip}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div className="rounded-xl bg-white p-6 shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">
                  <i className="fa-solid fa-quote-right text-green-500 mr-2"></i>例句参考
                </h3>
                <div className="space-y-3">
                  {content.exampleSentences.map((sentence, index) => (
                    <div key={index} className="flex items-start rounded-lg border border-gray-100 p-3 transition-all hover:border-blue-200 hover:bg-blue-50">
                      <i className="fa-regular fa-comment text-blue-400 mt-1 mr-3"></i>
                      <div className="flex-1">
                        <p className="text-gray-800">{sentence}</p>
                        <button className="mt-1 text-xs text-blue-500 hover:text-blue-700">
                          <i className="fa-solid fa-volume-up mr-1"></i>听发音
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </motion.div>

        {/* 返回按钮 */}
        <div className="mt-10 flex justify-center">
          <Link
            to="/"
            className="inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            <i className="fa-solid fa-arrow-left mr-2"></i>
            返回场景列表
          </Link>
        </div>
      </div>
    </div>
  );
}